import Taro, { Component } from '@tarojs/taro'
import {
  Swiper,
  SwiperItem,
  Image,
  View,
  Text,
  Input,
  Picker
} from '@tarojs/components'
import '../../assets/common.scss'
import CommonJs from '../../utils/common'

import './map.scss'



export default class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
       clist:[],
       list:[],
       regionList:[[],[]],
       value:[0,0],
    }
  }
  config = {
    navigationBarTitleText: '选择地点',
  }



  componentWillMount () {
  	this.getdate()
  	this.getData();
  }


  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}
	
	open(url){
		var byfrom = this.$router.params.byfrom;
  	if(byfrom=='gxc'){
  		url=url+"&byfrom=gxc"
  	}
    CommonJs.open(url);
  }
  getdate(){
  	var url='/shop/papi/v1.9/region?hot.in=YES'
  	var _this = this;
    CommonJs.ajaxRequest(url, "", "GET", function(res) {
      _this.setState({
        clist: res.data.list
      });
    });
  }
  onRegionChange(e){
    
    var list = this.state.list
    var value = this.state.value
    var column = e.detail.column
    var evalue = e.detail.value

    if(column == 0){
      var id=list[0][evalue].id
      this.getDataul(id)
      value[0]=evalue
      this.setState({
			  value:value
			})
    }
    else{
    	value[1]=evalue
      this.setState({
			  value:value
			})
    }
    
  }
  getData(){
    var _this = this
    var regionList = _this.state.regionList
    var list=_this.state.list
    var url='/shop/papi/v1.9/region/findByParent/144' ;
    CommonJs.ajaxRequest(url,'','GET',function(res){
      list[0] = res.data
      var arr = res.data
      regionList[0]=[];
      for(var i= 0; i< arr.length;i++){
        regionList[0].push(arr[i].name)
      }
      _this.setState({
        list: list,
        ischange:1,
        regionList:regionList,
      })
  
      _this.getDataul(arr[0].id)
    })
  }

  getDataul(id){
    var _this = this
    var regionList = _this.state.regionList
    var list=_this.state.list
    var url='/shop/papi/v1.9/region/findByParent/' + id  ;
    CommonJs.ajaxRequest(url,'','GET',function(res){
      list[1] = res.data
      var arr = res.data
      regionList[1]=[]
      for(var i= 0; i< arr.length;i++){
        regionList[1].push(arr[i].name)
      }
      _this.setState({
        list: list,
        regionList:regionList
      })
     
    })
  }

  sure(url){
  	
  	var list=this.state.list
  	var value=this.state.value
  	var byfrom = this.$router.params.byfrom;
  	if(byfrom=='gxc'){
  		url=url+"&byfrom=gxc"
  	}
  	if(list[1][value[1]].name){
  		this.open(url)
  	}
  	else{
  		Taro.showToast({
        title:'请选择城市',
        icon: 'none',
        duration: 2000
      })
  	}
  }
  
  render() {
  	const clist=this.state.clist;
  	const list=this.state.list
  	var value=this.state.value
    return (
      <View className='page'>
       <View className='mappage'>
      		<View className='mapdl'>
      			<View className='page-shop' >
                <View className='shop-type'><Text>选择区域</Text></View>
                <View className='shop-types'>
                	<Picker mode='multiSelector'  range={this.state.regionList}  onColumnChange={this.onRegionChange.bind(this)}>
                		{list[1][value[1]].name ? list[1][value[1]].name : '请选择'}
                	</Picker>
                </View>
          	</View>
          	<View className='shop-btn'>
		            <Button className='shopbtn' onClick={this.sure.bind(this,'/pages/grouplist/grouplist?cityname='+list[1][value[1]].name)}>确认</Button>
		        </View>
      		</View>
      		<View className='maphot'>
      			<View className='maphot-tit'>国内热门城市</View>
      			<View className='maphot-con'>
      				<Text className='li' onClick={this.open.bind(this,'/pages/grouplist/grouplist?cityname=全国')}>全国</Text>
      				{clist&&clist.map((item, index) => (
      				<Text className='li' onClick={this.open.bind(this,'/pages/grouplist/grouplist?cityname='+item.name)}>{item.name}</Text>
      				))}
      			</View>
      		</View>
			 </View>
      </View>
    )
  }
}
